<template>
  <vxe-modal v-model="dialogVisible" title="代码设计" resize show-zoom fullscreen show-footer>
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane name="createDTO" label="createDTO">
        <el-button type="primary" @click="createRow('createDTO')">新增一行</el-button>
        <el-table :data="designForm.createDTO">
          <el-table-column prop="javaName" label="javaName">
            <template slot-scope="{row}">
              <el-select v-model="row.javaName" filterable @change="(val)=>columnChange(columns,row,val)">
                <el-option v-for="(column,idx) in columns" :key="idx" :value="column.javaName" :label="column.javaName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="javaType" label="javaType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.javaType" />
            </template>
          </el-table-column>
          <el-table-column prop="formType" label="formType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.formType" />
            </template>
          </el-table-column>
          <el-table-column prop="isNullable" label="是否可为空">
            <template slot-scope="{row}">
              <el-switch
                v-model="row.isNullable"
                active-value="YES"
                inactive-value="NO"
              />
            </template>
          </el-table-column>
          <el-table-column prop="columnComment" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="text" @click="designForm.createDTO.splice(scope.$index,1)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="updateDTO" label="updateDTO">
        <el-button type="primary" @click="createRow('updateDTO')">新增一行</el-button>
        <el-table :data="designForm.updateDTO">
          <el-table-column prop="javaName" label="javaName">
            <template slot-scope="{row}">
              <el-select v-model="row.javaName" filterable @change="(val)=>columnChange(columns,row,val)">
                <el-option v-for="(column,idx) in columns" :key="idx" :value="column.javaName" :label="column.javaName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="javaType" label="javaType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.javaType" />
            </template>
          </el-table-column>
          <el-table-column prop="formType" label="formType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.formType" />
            </template>
          </el-table-column>
          <el-table-column prop="isNullable" label="是否可为空">
            <template slot-scope="{row}">
              <el-switch
                v-model="row.isNullable"
                active-value="YES"
                inactive-value="NO"
              />
            </template>
          </el-table-column>
          <el-table-column prop="columnComment" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="text" @click="designForm.updateDTO.splice(scope.$index,1)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="queryDTO" label="queryDTO">
        <el-button type="primary" @click="createRow('queryDTO')">新增一行</el-button>
        <el-table :data="designForm.queryDTO">
          <el-table-column prop="javaName" label="javaName">
            <template slot-scope="{row}">
              <el-select v-model="row.javaName" filterable @change="(val)=>columnChange(columns,row,val)">
                <el-option v-for="(column,idx) in columns" :key="idx" :value="column.javaName" :label="column.javaName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="javaType" label="javaType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.javaType" />
            </template>
          </el-table-column>
          <el-table-column prop="formType" label="formType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.formType" />
            </template>
          </el-table-column>
          <el-table-column prop="isNullable" label="高级搜索">
            <template slot-scope="{row}">
              <el-switch
                v-model="row.isNullable"
                active-value="YES"
                inactive-value="NO"
              />
            </template>
          </el-table-column>
          <el-table-column prop="columnComment" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="text" @click="designForm.queryDTO.splice(scope.$index,1)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="pageVO" label="pageVO">
        <el-button type="primary" @click="createRow('pageVO')">新增一行</el-button>
        <el-table :data="designForm.pageVO">
          <el-table-column prop="javaName" label="javaName">
            <template slot-scope="{row}">
              <el-select v-model="row.javaName" filterable @change="(val)=>columnChange(columns,row,val)">
                <el-option v-for="(column,idx) in columns" :key="idx" :value="column.javaName" :label="column.javaName" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="javaType" label="javaType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.javaType" />
            </template>
          </el-table-column>
          <el-table-column prop="formType" label="formType">
            <template slot-scope="{row}">
              <el-input v-model.trim="row.formType" />
            </template>
          </el-table-column>
          <el-table-column prop="columnComment" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="text" @click="designForm.pageVO.splice(scope.$index,1)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="clickSubmitBtn()">确定</el-button>
    </div>
  </vxe-modal>
</template>

<script>
import Api from '@/api/upms/code'
export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    columns: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      activeTab: 'createDTO',
      designForm: {
        tableName: '',
        createDTO: [],
        updateDTO: [],
        queryDTO: [],
        pageVO: []
      }

    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  mounted() {
    this.initFormTable()
  },
  methods: {
    initFormTable() {
      this.designForm.tableName = this.columns[0].tableName
      this.designForm.createDTO = JSON.parse(JSON.stringify(this.columns.filter(k => ['id', 'createTime', 'updateTime', 'createById', 'updateById', 'createByName', 'updateByName'].indexOf(k.javaName) === -1)))
      this.designForm.updateDTO = JSON.parse(JSON.stringify(this.columns.filter(k => ['createTime', 'updateTime', 'createById', 'updateById', 'createByName', 'updateByName'].indexOf(k.javaName) === -1)))
      this.designForm.queryDTO = JSON.parse(JSON.stringify(this.columns.filter(k => ['id', 'createById', 'updateById'].indexOf(k.javaName) === -1)))

      this.designForm.queryDTO.forEach(element => {
        element.isNullable = false
      })
      this.designForm.pageVO = JSON.parse(JSON.stringify(this.columns.filter(k => ['createById', 'updateById'].indexOf(k.javaName) === -1)))
    },
    createRow(tableName) {
      this.designForm[tableName].push({})
    },
    columnChange(columns, row, val) {
      const current = columns.find(k => k.javaName === val)
      row['isNullable'] = current.isNullable
      row['columnComment'] = current.columnComment
      row['javaType'] = current.javaType
      row['tableName'] = current.tableName
      row['columnName'] = current.columnName
      row['formType'] = current.formType
    },
    clickSubmitBtn() {
      Api.origin(this.designForm)
    }
  }

}
</script>

<style>

</style>
